<template>
  <div class="statistics-tables-comp">
    <div
      style="display: flex; align-items: center; justify-content: space-between"
    >
      <el-select v-model="tableSelectIndex" placeholder="请选择" @change="changeValue">
        <el-option
          v-for="item in tableSelectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
        v-hasPermi="['shop:order:export']"
        >导出</el-button
      >
    </div>

    <div>
      <el-table
        v-if="tableSelectIndex == '1'"
        :key="tableSelectIndex"
        v-loading="tableLoading"
        :data="tableData1"
        element-loading-text="正在查询中。。。"
        fit
        highlight-current-row
      >
        <el-table-column label="订单号" prop="orderNo" min-width="200" />
        <el-table-column label="商品名称" prop="name" min-width="150" />
        <el-table-column label="车架号" prop="vin" min-width="160" />
        <el-table-column label="用户ID" prop="userId" min-width="160" />
        <el-table-column label="车型名称" prop="modelName" min-width="150" />
        <el-table-column
          label="订单金额（¥）"
          prop="paymentPrice"
          min-width="80"
        />
        <el-table-column label="时间" prop="paymentTime" min-width="120" />
      </el-table>
    <pagination
      v-if="tableSelectIndex == '1'"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getTableData1"
    />

      

      <el-table
        v-if="tableSelectIndex == '2'"
        :key="tableSelectIndex"
        v-loading="tableLoading"
        :data="tableData2"
        element-loading-text="正在查询中。。。"
        fit
        highlight-current-row
      >
        <!-- <el-table-column label="退款单号" prop="id" min-width="160" /> -->
        <el-table-column label="订单号" prop="orderNo" min-width="180" />
        <el-table-column
          label="退款单号"
          prop="refundTradeNo"
          min-width="240"
        />
        <el-table-column
          label="退款金额（¥）"
          prop="refundAmount"
          min-width="100"
        />
        <el-table-column label="创建时间" prop="createDate" min-width="140" />
        <el-table-column
          label="最后更新时间"
          prop="lastUpdateDate"
          min-width="140"
        />
      </el-table>
    <pagination
      v-if="tableSelectIndex == '2'"
      :total="total2"
      :page.sync="pageNum2"
      :limit.sync="pageSize2"
      @pagination="getTableData2"
    />
    </div>
  </div>
</template>
<script>
import { myFormatDate } from "@/utils/index.js";
import {
  getSalesAmountDetailListByDate,
  getRefundAmountDetailListByDate,
} from "@/api/statistics/index.js";

export default {
  name: "statistics-tables-comp",
  components: {},
  props: {},
  computed: {},
  watch: {},
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total:0,
      pageNum2: 1,
      pageSize2: 10,
      total2:0,
      tableLoading: false,
      tableData1: [], // 订单列表
      tableData2: [], // 退费单列表
      tableSelectIndex: "1",
      tableSelectList: [
        {
          value: "1",
          label: "订单列表",
        },
        {
          value: "2",
          label: "退费单列表",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 获取所有数据
     */
    getData(dateRange, option = {}) {
      this.dateRange = dateRange;
      this.option = option;
      this.getTableData1();
      this.getTableData2();
    },
    /**
     * 获取订单列表数据
     */
    getTableData1() {
      getSalesAmountDetailListByDate({
        startDate: myFormatDate(new Date(this.dateRange[0]), "yyyy-MM-dd"),
        endDate: myFormatDate(new Date(this.dateRange[1]), "yyyy-MM-dd"),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.option,
      }).then((res) => {
        if (res.rows) {
          this.tableData1 = res.rows;
          this.total =res.total;
        }
      });
    },
    /**
     * 获取退费单列表数据
     */
    getTableData2() {
      getRefundAmountDetailListByDate({
        startDate: myFormatDate(new Date(this.dateRange[0]), "yyyy-MM-dd"),
        endDate: myFormatDate(new Date(this.dateRange[1]), "yyyy-MM-dd"),
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        ...this.option,
      }).then((res) => {
        if (res.rows) {
          this.tableData2 = res.rows;
          this.total2 =res.total;
        }
      });
    },
    changeValue(val){
      if(val==1){
        this.pageNum=1;
        this.getTableData1();
      }else if(val==2){
        this.pageNum2=1;
        this.getTableData2();
      }
    },
    /**
     * 导出按钮操作
     */
    handleExport() {
      let queryParams = {
        startDate: myFormatDate(new Date(this.dateRange[0]), "yyyy-MM-dd"),
        endDate: myFormatDate(new Date(this.dateRange[1]), "yyyy-MM-dd"),
        ...this.option,
      };
      if (this.tableSelectIndex == "1") {
        // 订单

        this.download(
          "shop/statistics/exportOrderInfo",
          queryParams,
          `statistics_order_${new Date().getTime()}.xlsx`
        );
      } else if (this.tableSelectIndex == "2") {
        // 退费单
        this.download(
          "shop/statistics/exportOrderRefunds",
          queryParams,
          `statistics_refund_order_${new Date().getTime()}.xlsx`
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.statistics-tables-comp {
}
</style>
